*{
    -webkit-user-select:none;

    -moz-user-select:none;

    -ms-user-select:none;

    user-select:none;
}

.welcome{
    width: 100%;
    height: 400px;
    background-color: #ffc069;
}
.welcome .container{
    position: relative;
    width: 60%;
    margin: 0px auto;
    padding-top: 20px;
}
.welcome .container  button{
    font-size: 28px;
    border:none;
    border: 1px solid transparent; 
    outline: none;    
    background-color: transparent;
    color: rgb(9, 167, 211);
    line-height: 38px;
    transition: .3s;
}
.welcome .container button:hover{
    color: rgb(4, 100, 202);
    transform: scale(1.1);
    transition: .3s;
}

.welcome .container .brand{
    margin-top: 80px;
    margin-left: 50px;
}

.formlink a{
    font-size: 18px;
    line-height: 28px;
    color: #3f6600;   
    transition: 300ms;
}
.formlink a:hover{
    color: #254000;
    transform: scale(1.1);
    transition: 300ms;
}

.introduction{
    width: 60%;
    margin: 0px auto;
}


.introduction .info{
    border: 5px dashed yellow;
    margin: 20px 0px;
    padding: 40px 40px;
    font-size: 20px;
    line-height: 30px;
}


.tabview div{
    max-width: 600px;
    font-size: 18px;
    line-height: 30px;
    margin-left: 50px;
    margin-top: 30px;
    margin-bottom: 100px;
}

.tabview h2{
    margin-top:10px;
    font-size: 22px;
    line-height: 50px;
}

.formlink {
    margin-top: 40px;
    margin-left: 70%;
    display: flex;
    /*align-items: center;
    justify-content: center;*/
    height:30px;
    width: 300px;
}

ul{
    margin-top: 10px;
    height:20px;
    list-style: none; 
}

li{
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-right: 10px;
}

li:nth-child(1){
    background-color: #f62e74;
}
li:nth-child(2){
    background-color: #f45330;
}
li:nth-child(3){
    background-color: #ffc883;
}
li:nth-child(4){
    background-color: #30d268;
}
li:nth-child(5){
    background-color: #006cb4;
}
li:nth-child(6){
    background-color: #30d268;
}
li:nth-child(7){
    background-color: #ffc883;
}
li:nth-child(8){
    background-color: #f45330;
}
li:nth-child(9){
    background-color: #f62e74;
}


.formlink:hover li:nth-child(1){
    animation: lovel1 2s infinite;
    background-color: #f62e74;
}
.formlink:hover li:nth-child(2){
    animation: lovel2 2s infinite;
    background-color: #f45330;
    animation-delay: 0.08s;
}
.formlink:hover li:nth-child(3){
    animation: lovel3 2s infinite;
    background-color: #ffc883;
    animation-delay: 0.16s;
}

.formlink:hover li:nth-child(4){
    animation: lovel4 2s infinite;
    background-color: #30d268;
    animation-delay: 0.24s;
}
.formlink:hover li:nth-child(5){
    animation: lovel5 2s infinite;
    background-color: #006cb4;
    animation-delay: 0.32s;
}
.formlink:hover li:nth-child(6){
    animation: lovel4 2s infinite;
    background-color: #30d268;
    animation-delay: 0.24s;
}
.formlink:hover li:nth-child(7){
    animation: lovel3 2s infinite;
    background-color: #ffc883;
    animation-delay: 0.16s;
}
.formlink:hover li:nth-child(8){
    animation: lovel2 2s infinite;
    background-color: #f45330;
    animation-delay: 0.08s;
}
.formlink:hover li:nth-child(9){
    animation: lovel1 2s infinite;
    background-color: #f62e74;
}

@keyframes lovel1{
    30%,50%{height: 30px; transform: translateY(-15px);}
    70%,100%{height: 10px; transform: translateY(0px);}
}
@keyframes lovel2{
    30%,50%{height: 62px; transform: translateY(-30px);}
    70%,100%{height: 10px; transform: translateY(0px);}
}
@keyframes lovel3{
    30%,50%{height: 80px; transform: translateY(-38px);}
    70%,100%{height: 10px; transform: translateY(0px);}
}
@keyframes lovel4{
    30%,50%{height: 90px; transform: translateY(-30px);}
    70%,100%{height: 10px; transform: translateY(0px);}
}
@keyframes lovel5{
    30%,50%{height: 95px; transform: translateY(-23px);}
    70%,100%{height: 10px; transform: translateY(0px);}
}
